<template>
  <div>首页</div>
  <div class="main">
    <div class="middle">
      <div class="middle-top-txt">
        <p>早上好！Daisy</p>
      </div>
      <!-- 四个提示 -->
      <div class="middle-top-four">
        <el-row :gutter="12">
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="four-card-group">
                <div class="left-img-a">
                  <div class="img-center">
                    <img src="@/assets/workbench/four-1.png">
                  </div>
                </div>
                <div class="right-intro">
                  <div class="two-top-txt">居民总数量</div>
                  <div class="two-bottom-txt-a">11,000</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="four-card-group">
                <div class="left-img-b">
                  <div class="img-center">
                    <img src="@/assets/workbench/four-2.png">
                  </div>
                </div>
                <div class="right-intro">
                  <div class="two-top-txt">签约居民数量</div>
                  <div class="two-bottom-txt-b">56,000</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="four-card-group">
                <div class="left-img-c">
                  <div class="img-center">
                    <img src="@/assets/workbench/four-3.png">
                  </div>
                </div>
                <div class="right-intro">
                  <div class="two-top-txt">待处理服务量</div>
                  <div class="two-bottom-txt-c">600</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="four-card-group">
                <div class="left-img-d">
                  <div class="img-center">
                    <img src="@/assets/workbench/four-4.png">
                  </div>
                </div>
                <div class="right-intro">
                  <div class="two-top-txt">已完成服务量</div>
                  <div class="two-bottom-txt-d">8900</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 数据概况 -->
      <el-card class="data-about">
        <div ref="rs" id="Data-overview" style="width:800px;height:23em;margin: 2em 0 0 0;">
        </div>
      </el-card>
      <!--代办提醒-->
      <div class="remind">
        <el-card class="box-card">
          <p class="remind-p">代办提醒</p>
          <a href="#">
            <div class="item"><span>10</span>
              <p>待审核签约申请</p>
            </div>
          </a>
          <a href="#">
            <div class="item"><span>10</span>
              <p>待审核签约申请</p>
            </div>
          </a>
          <a href="#">
            <div class="item"><span>10</span>
              <p>待审核签约申请</p>
            </div>
          </a>
          <a href="#">
            <div class="item"><span>10</span>
              <p>待审核签约申请</p>
            </div>
          </a>
          <a href="#">
            <div class="item"><span>10</span>
              <p>待审核签约申请</p>
            </div>
          </a>
        </el-card>
      </div>
      <!-- 居民标签 -->
      <div class="Resident-Label">
        <el-card>
          <span>居民标签</span>
          <div class="demo-progress">
            <span>高血压</span>
            <el-progress :percentage="50">
              <el-button text>200</el-button>
            </el-progress>
            <span>高血压</span>
            <el-progress :percentage="50">
              <el-button text>200</el-button>
            </el-progress>
            <span>高血压</span>
            <el-progress :percentage="50">
              <el-button text>200</el-button>
            </el-progress>
            <span>高血压</span>
            <el-progress :percentage="50">
              <el-button text>200</el-button>
            </el-progress>
            <span>高血压</span>
            <el-progress :percentage="50">
              <el-button text>200</el-button>
            </el-progress>
            <span>高血压</span>
            <el-progress :percentage="50">
              <el-button text>200</el-button>
            </el-progress>
          </div>
        </el-card>
      </div>
      <!-- 居民指标异常 -->
      <div class="Resident-indicators">
        <el-card>
          <!--头顶文字-->
          <div class="top-txt">
            <span>居民指标异常</span>
            <a href="#" class="all">全部></a>
          </div>
          <!--三个卡片-->
          <el-row>
            <el-col :span="7" v-for="(o, index) in 3" :key="o" :offset="index > 0 ? 1 : 0" class="three-card">
              <el-card :body-style="{ padding: '0px' }" class="patient-card" shadow="hover">
                <img src="@/assets/workbench/head.png" class="image">
                <div style="padding: 14px;">
                  <p class="patient-introduce">王然<span class="patient-age">26岁</span><img
                      src="@/assets/workbench/u1152.png" class="patient-sex"></p>
                  <p class="note-thing-row"><img src="@/assets/workbench/note.png"><span class="note-txt">血糖过高</span>
                  </p>
                  <div class="bottom">
                    <el-button type="primary">查看详情</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <!-- 本周签约概况 -->
      <div class="Signing-overview">
        <el-card>
          <span>本周签约概况</span>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="name" label="团队" width="140">
            </el-table-column>
            <el-table-column prop="number" label="2021-01-04" width="140">
            </el-table-column>
            <el-table-column prop="number" label="2021-01-05" width="140">
            </el-table-column>
            <el-table-column prop="number" label="2021-01-06" width="140">
            </el-table-column>
            <el-table-column prop="number" label="2021-01-07" width="140">
            </el-table-column>
            <el-table-column prop="number" label="2021-01-08" width="140">
            </el-table-column>
            <el-table-column prop="number" label="2021-01-09" width="140">
            </el-table-column>
            <el-table-column prop="number" label="2021-01-10" width="140">
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TitleComponentOption,
  ToolboxComponent,
  ToolboxComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption
} from 'echarts/components';
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

type EChartsOption = echarts.ComposeOption<
  | TitleComponentOption
  | ToolboxComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | LineSeriesOption
>;
const rs = ref("")
let chartDom

onMounted(() => {

  const chartDom: HTMLElement = document.querySelector("#Data-overview") as HTMLElement;
  const myChart = echarts.init(chartDom);
  const option: EChartsOption = {
    title: {
      text: '数据概况'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ["居民数量", '签约量', '服务量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '居民数量',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '签约量',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '服务量',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      }
    ]
  };

  option && myChart.setOption(option);
  chartDom.style.height = "200";
})

</script>

<script lang="ts">
export default {
  data() {
    return {
      tableData: [{
        number:'50',
        name: '大表哥团队'
      }, {
        number: '100',
        name: '大表哥团队'
      }, {
        number: '150',
        name: '大表哥团队'
      }, {
        number: '146',
        name: '大表哥团队'
      }, {
        number: '134',
        name: '大表哥团队'
      }, {
        number: '120',
        name: '大表哥团队'
      }, {
        number: '109',
        name: '大表哥团队'
      }]
    }
  }
}
</script>
<style scoped>
@import url("@/style/workbench.css");
</style>